<template lang="pug">
view.box.p10
	u-search(
		 placeholder="请输入"
	)
	view.flex.f14.ct.mt10
		view.w25.por(
		v-for="item,index in tablist" 
		@click="selectTab(index)" 
		:class="taninx==index?'tabactive':''"
		) {{item}}
	view.mt20
		view.cart.p10.flex.at
			image(
				src="/static/wxz.png",
				mode="widthFix",
				style="width:16px"
			)
			image(
				src="http://img.duoziwang.com/2018/06/2018010130169489.jpg",
				mode="widthFix",
				style="width:70px;border-radius:6px;margin:0 10px"
			)
			view
				view.title 体温计
				view.mt10.flex.at
					text.f12(style="color:#F93838") ￥
					text.f16(style="color:#F93838") 299.00
					view.ml(style="width:100%;margin-left:60px")
						u-number-box(
							v-model="value"
							button-size="24"
							bgColor="#00E0CF"
							color="#ffffff"
							iconStyle="color: #fff"
						)
	view(style="height:50px")
	view.bu.flex.at.prl10.box
		view 已选3件
		view.button.f12.ml(style="height:30px;line-height:30px;padding:0 20px") 发送
</template>

<script>
	export default {
		data() {
			return {
				tablist:['全部','高血糖','高血压','睡眠障碍'],
				taninx:0,
				value:1
			}
		},
		methods: {
			selectTab(e){
				this.taninx=e
			}
		}
	}
</script>

<style>
page{
	background: #f0f0f0;
}
.tabactive{
	color: #17D2C9;
	font-weight: bold;
	font-size: 16px;
}
.tabactive::before {
	content: '';
	position: absolute;
	z-index: 1;
	width: 20%;
	height: 4px;
	background: #17D2C9;
	bottom: -10px;
	left: 40%;
}
.bu{
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 50px;
	background: #fff;
	bottom: 0;
	left: 0;
}
</style>
